<template>
  <div class="accidentReport">
    <NavBar fixed placeholder title="专项督办" z-index="999" ref="nav">
      <template #left>
        <Icon
          name="arrow-left"
          size="0.53rem"
          color="#000"
          @click="$router.back()"
        />
      </template>
    </NavBar>
    <div class="main">
      <Field
        v-model="info.supervisor1"
        label="督办人"
        placeholder=""
        input-align="right"
        readonly
      >
      </Field>
      <Field
        v-model="info.supervisorDepart1"
        label="督办部门"
        placeholder=""
        input-align="right"
        readonly
      >
      </Field>
      <Field
        v-model="info.rssName"
        label="督办任务名称"
        placeholder="请输入督办任务名称"
        input-align="right"
      >
      </Field>
      <Field
        v-if="info.upNo == 0"
        v-model="info.rssProcessStyleText"
        label="分类"
        placeholder="请选择分类"
        input-align="right"
        readonly
        @click="show = true"
        is-link
      >
      </Field>

      <!-- <Cell title="督办任务" />
      <textarea
        v-model="info.rssName"
        placeholder="请描述想要反馈的问题"
        cols="30"
        rows="10"
      ></textarea> -->
      <Cell title="督办要求" />
      <textarea
        v-model="info.requirement"
        placeholder="请描述想要反馈的问题"
        cols="30"
        rows="10"
      ></textarea>
      <Field
        v-model="info.executorNam"
        label="责任人"
        input-align="right"
        is-link
        readonly
        @click="toJump3"
      />
      <Field
        v-model="info.departNam"
        readonly
        label="责任部门"
        input-align="right"
      />
      <Field
        v-model="info.endDtm"
        label="任务截至时间"
        is-link
        readonly
        input-align="right"
        @click="show1 = true"
      />
    </div>
    <Button class="btn" @click="onSubmit">提交</Button>

    <Popup v-model="show" position="bottom" :style="{ height: '50%' }">
      <Picker
        title="分类"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="show = false"
      />
    </Popup>
    <Popup v-model="show1" position="bottom" :style="{ height: '50%' }">
      <DatetimePicker
        v-model="currentDate"
        type="datetime"
        title="任务截至时间"
        :min-date="minDate"
        @confirm="startConfirm"
        @cancel="show1 = false"
        item-height="1rem"
      />
    </Popup>
  </div>
</template>

<script>
import uploadImages from "@/utils/uploadImages.js";
import { SupervisedAndSubmit, overseeList } from "@/api/work";
import Layout from "components/Layout";
import {
  NavBar,
  Icon,
  Field,
  Cell,
  Uploader,
  Button,
  Popup,
  Picker,
  Toast,
  DatetimePicker,
} from "vant";
export default {
  name: "accidentReport",

  components: {
    Uploader,
    Layout,
    NavBar,
    Icon,
    Field,
    Cell,
    Button,
    Popup,
    Picker,
    Toast,
    DatetimePicker,
  },

  directives: {},

  data() {
    return {
      show1: false,
      show: false,
      minDate: new Date(),
      columns: [
        { text: "部门", value: "part" },
        { text: "安委办", value: "scenery" },
      ],
      currentDate: new Date(),
      time: "",
      info: {
        supervisor: "",
        supervisor1: "",
        supervisorDepart: "",
        supervisorDepart1: "",
        rssName: "",
        requirement: "",
        executor: "",
        departNo: "",
        departNo1: "",
        endDtm: "",
        rssNo: -1,
        executorNam: "",
        departNam: "",
        rssProcessStyle: "",
        rssProcessStyleText: "",
        orgNo: localStorage.getItem("orgNo"),
        upNo: "",
      },
    };
  },
  computed: {
    point() {
      return JSON.stringify([this.lng, this.lat]);
    },
  },
  mounted() {
    this.onLoad();
    if (this.$route.query.supervisor) {
      this.info = this.$route.query;
      console.log(22);
    } else {
      let info = JSON.parse(localStorage.getItem("userInfo"));
      console.log("info", info);
      this.info.supervisor = info.userId;
      this.info.supervisor1 = info.userName;
      this.info.supervisorDepart1 = info.departName;
      this.info.supervisorDepart = info.departNo;
    }
  },

  methods: {
    async onLoad() {
      const { param } = await overseeList({
        sign: "",
        orgNo: localStorage.getItem("orgNo"),
        pageNum: 1,
        pageSize: 1,
        rssName: "",
      });
      console.log(444, param.upNo);
      this.info.upNo = param.upNo;
    },
    //扫一扫事件
    toJump() {
      console.log(1);
      this.$router.push({
        path: "AccidentRecordList",
        query: {},
      });
    },
    onClickLeft() {},
    onClickRight() {},
    toRecordsList() {
      this.$router.push({
        path: "RecordsList",
        query: {},
      });
    },
    onConfirm(value, index) {
      console.log(value);
      this.info.rssProcessStyleText = value.text;
      this.info.rssProcessStyle = value.value;
      this.info.executorNam = "";
      this.info.departNam = "";

      this.show = false;
    },
    async onSubmit() {
      if (this.info.rssName.length <= 0) return Toast.fail("请输入督办任务");
      if (this.info.requirement.length <= 0)
        return Toast.fail("请输入督办要求");
      if (this.info.executorNam.length <= 0) return Toast.fail("请选择责任人");
      if (this.info.endDtm.length <= 0) return Toast.fail("请选择任务截至时间");

      const data = await SupervisedAndSubmit({
        ...this.info,
        orgNo: localStorage.getItem("orgNo"),
      });
      console.log(data);
      this.$router.push({
        path: "Supervisory",
        query: {},
      });
    },
    startConfirm(value) {
      // 时间赋值
      this.info.endDtm = this.getTime(value);
      console.log(this.time);
      this.show1 = false;
    },
    getTime(time) {
      const year = time.getFullYear();
      const Month = time.getMonth() + 1;
      const Date = time.getDate();
      let hour = time.getHours();
      hour = hour < 10 ? "0" + hour : hour;
      let m = time.getMinutes();
      m = m < 10 ? "0" + m : m;
      return `${year}-${Month}-${Date} ${hour}:${m}`;
    },
    toJump3() {
      if (this.info.upNo == 0 && this.info.rssProcessStyleText.length <= 0) {
        return Toast("请先选择分类");
      }
      this.$router.push({
        path: "OverseeLiabilityCompanies",
        query: this.info,
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/style/var.less";
.accidentReport {
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  background-color: #f7f7f9;
  padding: 30px 0;
  // /deep/.van-nav-bar__content {
  //   background-color: #3982f6;

  //   .van-nav-bar__title {
  //     color: #fff;
  //   }
  // }
  .main {
    padding-bottom: 20px;
    background-color: #fff;
    .search-icon {
      color: @primary;
      // margin-top: 8px;
      // margin-left: 8px;
    }
    textarea {
      width: 692px;
      height: 157px;
      margin: 10px 0;
      margin-left: 50%;
      padding: 15px;
      transform: translate(-50%);
      border: 1px solid #dddddd;
      font-size: 26px;
      border-radius: 6px;
    }
    /deep/.van-cell__title span {
      color: black;
    }
    .location-box {
      width: 100%;
      display: flex;
      align-items: center;
      div {
        font-size: 28px;
        color: #999999;
      }
    }
    .van-uploader {
      margin: 20px;
    }
    /deep/.van-uploader__upload {
      border: 2px dashed #e16712;
      width: 110px;
      height: 110px;
      border-radius: 4px;
      background: #fff;
      .van-icon {
        color: rgb(225, 103, 18);
        &::before {
          content: "\F0A2";
        }
      }
    }
  }
  .btn {
    height: 98px;
    position: fixed;
    bottom: 10px;
    left: 50%;
    width: 90%;
    transform: translate(-50%);
    background: #fff;
    border-radius: 6px;
    font-weight: 500;
    color: @primary;
    border: 1px solid @primary;
    font-size: 36px;
  }
}
</style>